<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <style>
        .box {
            box-sizing: border-box;
            width:200px;
            height:200px;
            padding:10px;
            background-color: pink;
            border:10px solid red;
            margin:10px;
        }
        
        .box1 {
            width:200px;
            height:200px;
            padding:10px;
            background-color: pink;
            border:10px solid red;
            margin:10px;
        }

        img,a {
            -webkit-appearance: none;
            -webkit-touch-callout: none;
        }

        .flex {
            display: flex;
            width:375px;
            height:auto;
            flex-wrap: wrap;
            /* 水平翻转 */
            /* flex-direction: row-reverse; */
            /* 设置主轴以水平排列  row 默认*/
            /* flex-direction: row; */
            /* 设置主轴按纵向排列  column */
            flex-direction: column;
            /* 设置主轴 */
            /* flex-direction: column-reverse; */
            /* 设置沿着主轴方向排列的方式 */
            /* 沿着水平排列从左往右 */
            /* justify-content:flex-start; */
            /* 沿着水平排列从右往左 */
            /* justify-content:flex-end; */
            /* 主轴居中 */
            /* justify-content: center; */

            /* 主轴方向等距离分配，且两端与边缘无间距 */
            /* justify-content: space-between; */
            /* space-around (主轴方向等距离分配，且两端与边缘也是等间距) */
            /* justify-content: space-around; */

            
        }

        .item {
            width:100px;
            height:100px;
            border-radius: 10px;
            background-color:pink;
            text-align: center;
            line-height:100px;
            
        }

    .item1-1{ background:red;}
    .item1-2{ background:orange; align-self: center;}
    .item1-3{ background:yellow;}
    .item1-4{ background:green;}
    .item1-5{ background:cyan;}
    .item1-6{ background:blue;}
        
    /* 
        justify-content (沿主轴方向排列方式)
            flex-start (排列到主轴方向头部)
            flex-end (排列到主轴方向尾部)
            center (主轴中间)
            space-between (主轴方向等距离分配，且两端与边缘无间距)
            space-around (主轴方向等距离分配，且两端与边缘也是等间距)
            align-self (作用交差轴向)
    */


    /* rem */
    /* html {
        font-size:10px;
    }
    .box3 {
        width:10rem;
        height:10rem;
        background-color: pink;
    } */
    /* em */
    /* .box3 {
        font-size:12px;
    }

    .box3-item {
        /* width:1em;
        height:1em;
        background:pink; */
        /* font-size:24px; */
        /* width:2em;
        height:2em; */
    /* } */

    /* .box3-item-sub {
        width:1em;
        height:1em;
        background:pink;
    }  */

    /* vw vh */
    .box4 {
        width:100vw;
        height:100vh;
        background-color:rgba(0, 0, 0, 0.24);
        position: fixed;
        top:0;
        left:0;
    }

    /* % */
    /* .box5 {
        width:200px;
        height:200px;
        background:red;
    }

    .box5-sub {
        width:100%;
        height:50%;

        background:blue;
    } */
    
    </style>
</head>
<body>
    <!-- <div class="box"></div>
    <div class="box1"></div>
    <img src="imgs/img100.png" />
    <a href="javascritp:void(0)">链接</a> -->
    <!-- flex -->
    <!-- <div class="flex">
        <div class="item item1-1">1</div>
        <div class="item item1-2">2</div>
        <div class="item item1-3">3</div>
        <div class="item item1-4">4</div>
        <div class="item item1-5">5</div>
        <div class="item item1-6">6</div>
    </div> -->

    <!-- <div class="box3">
        <div class="box3-item">
            <div class="box3-item-sub"></div>
        </div>
    </div> -->
    <div class="container">
        测试测试测试测试
    </div>
    <div class="box4" style="line-height:100vh;">
        遮罩层内容
    </div>

    <div class="box5">
        <div class="box5-sub"></div>
    </div>
</body>
</html>